<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <tui-hosted-dropdown
    *ngIf="member.user.username !== user?.username"
    [tuiDropdownAlign]="'right'"
    [content]="removeFromProject"
    [(open)]="removeDropdownState"
    (tuiActiveZoneChange)="closeDropdown()">
    <button
      [tgRestoreFocusTarget]="'remove-member' + member.user.username"
      data-test="remove-project-member"
      appearance="primary"
      tuiLink
      class="row-action"
      [class.active]="removeDropdownState"
      (click)="openRemoveDropdown()"
      aria-haspopup="true"
      [attr.aria-expanded]="removeDropdownState"
      type="button">
      {{ t('common_members_tabs.remove') }}
    </button>
  </tui-hosted-dropdown>

  <tui-hosted-dropdown
    *ngIf="member.user.username === user?.username"
    [tuiDropdownAlign]="'right'"
    [content]="leaveAsAdmin"
    [(open)]="leaveDropdownState"
    (tuiActiveZoneChange)="closeDropdown()">
    <button
      [tgRestoreFocusTarget]="'leave' + member.user.username"
      appearance="primary"
      tuiLink
      class="row-action"
      [class.active]="leaveDropdownState"
      (click)="openLeaveDropdown()"
      aria-haspopup="true"
      [attr.aria-expanded]="leaveDropdownState"
      type="button">
      {{ t('common_members_tabs.leave') }}
    </button>
  </tui-hosted-dropdown>

  <ng-template #leaveAsAdmin>
    <div
      [tgRestoreFocus]="'leave' + member.user.username"
      class="action-dialog"
      cdkTrapFocus>
      <ng-container *ngIf="!hasSingleAdmin">
        <p class="action-dialog-title">
          {{
            t('common_members_tabs.leave_title', {
              project_name: project.name
            })
          }}
        </p>
        <p class="action-dialog-description">
          {{ t('common_members_tabs.leave_description') }}
        </p>
        <div class="action-dialog-actions">
          <button
            tuiLink
            data-test="cancel-leave"
            appearance="tertiary"
            (click)="closeDropdown()">
            {{ t('common_members_tabs.no_cancel') }}
          </button>
          <button
            data-test="confirm-leave"
            tuiButton
            icon="leave"
            appearance="secondary"
            (click)="confirm(true)">
            {{ t('common_members_tabs.leave_confirm') }}
          </button>
        </div>
      </ng-container>
      <ng-container *ngIf="hasSingleAdmin">
        <p class="action-dialog-title">
          {{ t('common_members_tabs.last_admin_warning_title') }}
        </p>
        <p class="action-dialog-description">
          {{ t('common_members_tabs.last_admin_warning_description') }}
        </p>
      </ng-container>
    </div>
  </ng-template>

  <ng-template #removeFromProject>
    <div
      [tgRestoreFocus]="'remove-member' + member.user.username"
      class="action-dialog"
      data-test="confirm-remove-member"
      cdkTrapFocus>
      <p class="action-dialog-title">
        {{
          t('common_members_tabs.remove_title', {
            user_name: member.user.fullName || member.user.username
          })
        }}
      </p>
      <p class="action-dialog-description">
        {{ t('common_members_tabs.remove_description') }}
      </p>
      <div class="action-dialog-actions">
        <button
          tuiLink
          data-test="cancel-remove-btn"
          appearance="tertiary"
          (click)="closeDropdown()">
          {{ t('common_members_tabs.no_cancel') }}
        </button>
        <button
          data-test="confirm-remove-btn"
          tuiButton
          icon="trash"
          appearance="destructive"
          (click)="confirm(false)">
          {{ t('common_members_tabs.remove_confirm') }}
        </button>
      </div>
    </div>
  </ng-template>
</ng-container>
